@charset "UTF-8";

// 下划线
@mixin underline {
  border-bottom: 1px dashed #f1f1f1;
}

/**
 * @description: 单行截断
 */
@mixin truncation {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

// 2行数
@mixin truncation2 {
  /* 有些示例里需要定义该属性，实际可省略 */
  /* stylelint-disable-next-line value-no-vendor-prefix */
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-line-clamp: 2;

  /* 规定超过两行的部分截断 */
  -webkit-box-orient: vertical;
}

/**
 * @description: m-居中
 */
@mixin m-center {
  margin: 0 auto;
}

@mixin line-numbers($num) {
  /* stylelint-disable-next-line value-no-vendor-prefix */
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-line-clamp: $num;
  -webkit-box-orient: vertical;
}

/**
 * @description: 滚动条
 */
@mixin scroll {
  // 整个滚动条.
  ::-webkit-scrollbar {
    width: 3.8px;
    height: 3.8px;
  }

  /*
  **滚动条轨道.
  */
  ::-webkit-scrollbar-track {
    width: 6px;
    background: rgba(#101f1c, 0.1);
    border-radius: 2em;
  }

  /*
  **滚动条上的滚动滑块.
  */
  ::-webkit-scrollbar-thumb {
    min-height: 28px;
    background-color: rgba(#101f1c, 0.5);
    background-clip: padding-box;
    border-radius: 2em;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(#59c9b2, 1);
  }
}

/* 模块居中 */
@mixin center-children {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 大于1366 小于1536 */
@mixin media-2xl {
  @media screen and (min-width: 1366px) and (max-width: 1536px) {
    @content;
    @apply bg-emerald-500;
  }
}

/* 大于1200 小于1366 */
@mixin media-xl {
  @media screen and (min-width: 1200px) and (max-width: 1366px) {
    @content;
    @apply bg-yellow-500;
  }
}

/* 大于992 小于1200 */
@mixin media-lg {
  @media screen and (min-width: 992px) and (max-width: 1200px) {
    @content;
    @apply bg-blue-500;
  }
}

/* 大于768 小于992 */
@mixin media-base {
  @media screen and (min-width: 768px) and (max-width: 992px) {
    @content;
    @apply bg-red-500;
  }
}

@mixin media-sm {
  @media screen and (min-width: 380px) and (max-width: 840px) {
    @content;
    @apply bg-emerald-500;
  }
}

/* 全局动画过度 */

/* 可以为进入和离开动画设置不同的持续时间和动画函数 */
.fade-enter-active {
  /* 进入过程 */
  animation: fade-in 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

.fade-leave-active {
  /* 离开过程 */
  animation: fade-out 0.5s ease-out both;
}

/* 进入开始和离开结束的状态 */
.fade-enter-to {
  opacity: 0;
}

/* 进入开始和离开结束的状态 */
.fade-leave-to {
  /* 防抖动 */
  display: none;
  opacity: 0;
}

/* 全局动画过度 */

.fade-out {
  animation: fade-out 1s ease-out both;
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.fade-in {
  animation: fade-in 0.9s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fade-out-center {
  animation: square-out-center 1s ease-out both;
}

@keyframes square-out-center {
  from {
    clip-path: inset(0 0 0 0);
  }

  to {
    clip-path: inset(100% 100% 100% 100%);
  }
}

[transition-style='out:square:center'] {
  animation: 2.5s cubic-bezier(0.25, 1, 0.3, 1) square-out-center both;
}

/*
  进入和离开动画可以使用不同
  持续时间和速度曲线。
*/
.slidey-fade-enter-active {
  transition: all 0.5s ease-out;
}

.slidey-fade-leave-active {
  transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
}

.slidey-fade-enter-from,
.slidey-fade-leave-to {
  transform: translateY(500px);
  opacity: 1;
}

.slidex-fade-enter-active {
  transition: all 0.5s ease-out;
}

.slidex-fade-leave-active {
  transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
}

.slidex-fade-enter-from,
.slidex-fade-leave-to {
  transform: translateX(100px);
  opacity: 1;
}

@font-face {
  font-family: PuHuiTiBASE;
  src: url('/src/assets/fonts/55_Regular.ttf');
}

@font-face {
  font-family: PuHuiTiXL;
  src: url('/src/assets/fonts/55_Bold.ttf');
}

html,
body {
  font-family: PuHuiTiBASE, monospace;

  @apply fixed;
}

input {
  height: 40px;
  padding: 0 1rem 0 0.5rem;
  color: #0d0c22;
  line-height: 28px;
  border: 1px solid transparent;
  border-color: rgb(128 121 124 / 70%);
  border-radius: 3px;
  outline: none;
  transition: 0.3s ease;

  @apply text-base;
}

input::placeholder {
  color: #9e9ea7;
}

input:focus,
input:hover {
  background-color: #fff;
  border-color: rgb(128 121 124 / 60%);
  outline: none;
  box-shadow: 0 0 0 2px rgb(194 176 183 / 10%);
}

// button {
//   height: 40px;
//   border-color: rgb(128 121 124 / 40%);

//   @apply cursor-pointer border rounded bg-gray-100 px-2 py-1 text-center text-base hover:text-blue-500;
// }
